<template>
	<view class="recycle_order-container">
		<!-- 地址 -->
		<view class="recycle_order-address">
			<view class="recycle_order-address-header">
				<view class="recycle_order-address-header-title">自行寄出</view>
				<view class="recycle_order-address-btn--copy" @tap="onCopyAddress">复制地址</view>
			</view>
			<view class="recycle_order-address-content mt30">
				<view class="recycle_order-address-icon mr20">
					<u-icon name="map" size="44rpx" color="#D7D7D7" />
				</view>
				<view>
					<view class="mb10 md" style="color: #222222;">
						<text>收件地址:</text>
						<text class="ml10">{{ plat.name }}</text>
						<text class="ml20">{{ plat.mobile }}</text>
					</view>
					<view class="mb20 sm lighter">{{ plat.address }}</view>
					<view class="ornament xs">请在下单后及时将商品寄出</view>
				</view>
			</view>
		</view>



		<view class="recycle_order-address">
			<view class="recycle_order-address-header">
				<view class="recycle_order-address-header-title">邮寄物流信息</view>
			</view>
			<view class="mt30">
				<u-form-item prop="meid" :border-bottom="false">
					<u-field label="快递公司名称" type="input" v-model="form.name" maxlength="20" placeholder-style="#999999"
						placeholder="请输入快递公司名称" :border-bottom="false" label-width="180" />
				</u-form-item>
				<u-form-item prop="meid" :border-bottom="false">
					<u-field label="快递单号" type="input" v-model="form.number" maxlength="20" placeholder-style="#999999"
						placeholder="请输入快递单号" :border-bottom="false" label-width="180" />
				</u-form-item>
			</view>
		</view>

		<view class="recycle_order-address">
			<view class="recycle_order-address-header">
				<view class="recycle_order-address-header-title">备注说明(选填)</view>
			</view>
			<view class="mt30">
				<u-field v-model="form.remark" type="textarea" height="160" label-width="0" :clearable="false"
					:border-bottom="false" maxlength="240" style="line-height: 1.2em;" placeholder="请输入备注内容" />
			</view>
		</view>


		<!-- 提交订单 -->
		<view class="recycle_order-submit-box">
			<view class="recycle_order-btn-submit" @tap="showRecycleProtocol=true;">确认订单</view>
		</view>


		<!-- 回收协议 -->
		<u-popup v-model="showRecycleProtocol" mode="center" border-radius="20">
			<view class="protocol">
				<view class="protocol-title">回收协议</view>
				<scroll-view scroll-y="true" class="protocol-content">
					<u-parse :html="protocolHtml" />
				</scroll-view>
				<view class="protocol-confirm" @tap="handleOrderSubmit">我知道了</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		postSendGoods,
		getRecycleProtocol,
		getQuHuanDetail
	} from '@/api/recycle'

	export default {
		data() {
			return {
				plat: null, // 回收地址信息
				showRecycleProtocol: false, // 回收协议
				protocolHtml: '', // 回收协议内容
				orderInfo: null,
				form: {
					name: '',
					number: '',
					remark: '',
				},
			}
		},
		methods: {
			// 复制地址
			onCopyAddress() {
				const data = this.plat;
				uni.setClipboardData({
					data: `收件人:${ data.name } 联系方式:${ data.mobile } 收件地址:${ data.address }`,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				});
			},

			// 订单提交
			handleOrderSubmit() {
				if (!this.form.name) return this.$toast({
					title: '请输入快递公司名称'
				});
				if (!this.form.number) return this.$toast({
					title: '请输入快递单号'
				});
				postSendGoods({
					id: this.orderInfo.id,
					express_name: this.form.name,
					express_number: this.form.number,
					remark: this.form.remark,
				}).then(res => {
					if (res.code != 1) return this.$toast({
						title: res.msg
					});
					this.showRecycleProtocol = false;
					uni.redirectTo({
						url: '/bundle/pages/recycle_order_submited/recycle_order_submited'
					});
				})
			},
		},

		onLoad(options) {
			getQuHuanDetail({
				id: options.id
			}).then(res => {
				if (res.code != 1) return this.$toast({
					title: res.msg
				});
				this.orderInfo = res.data;
				this.plat = res.data.plat_info
			})

			getRecycleProtocol().then(({
				code,
				data
			}) => {
				if (code != 1) return;
				this.protocolHtml = data;
			});
		},
	}
</script>

<style scoped>
	.recycle_order-container {
		padding: 0 20rpx;
	}

	.recycle_order-address,
	.recycle_order-price {
		margin-top: 20rpx;
		padding: 20rpx;
		border-radius: 10px;
		background-color: #FFFFFF;
	}

	.recycle-meid {
		padding: 0 20rpx;
		border-radius: 10px;
		margin-top: 20rpx;
		background-color: #FFFFFF;
	}

	.recycle-meid>>>.u-field {
		flex: 1;
		padding: 0;
	}

	.recycle_order-address-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.recycle_order-address-header-title {
		font-size: 32rpx;
		color: #333333;
	}

	.recycle_order-address-btn--copy {
		padding: 6rpx 24rpx;
		border: 1rpx solid #24A3FF;
		border-radius: 2px;
		font-size: 22rpx;
		color: #24A3FF;
	}

	.recycle_order-address-content {
		display: flex;
	}

	.recycle_order-submit-box {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0 30rpx;
		background-color: #FFFFFF;
	}

	.recycle_order-btn-submit {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 84rpx;
		margin-bottom: 10rpx;
		border-radius: 30px;
		font-size: 32rpx;
		background-image: linear-gradient(to right, #24A3FF, #3187FD);
		color: #FFFFFF;
	}

	.protocol {
		display: flex;
		flex-direction: column;
		width: 88vw;
		height: 88vh;
		padding: 20rpx;
		background-color: #FFFFFF;
	}

	.protocol-title {
		padding: 20rpx 0;
		font-size: 32rpx;
		font-weight: 500;
		text-align: center;
		color: #333333;
	}

	.protocol-content {
		flex: 1;
		overflow: scroll;
	}

	.protocol-confirm {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 72rpx;
		border-radius: 50px;
		margin-top: 20rpx;
		font-size: 32rpx;
		background-color: #24A3FF;
		color: #FFFFFF;
	}

	>>>.u-form-item {
		padding: 0 !important;
	}

	>>>.u-field {
		padding: 0 !important;
	}
</style>